<p ng-if="!loaded">Loading...</p>

<div ng-if="emptyCatalog && loaded" class="empty-state-message empty-state-full-page">
  <h2 class="text-center">No images or templates.</h2>

  <p class="gutter-top">
    No images or templates are loaded for this project or the shared
    <code>openshift</code> namespace. An image or template is
    required to add content.
  </p>

  <p>
    To add an image stream or template from a file, use the editor in the
    <strong>Import YAML / JSON</strong> tab, or run the following command:
    <div><code>oc create -f &lt;filename&gt; -n {{projectName}}</code></div>
  </p>

  <p><a href="{{projectName | projectOverviewURL}}">Back to overview</a></p>
</div>

<div ng-show="!emptyCatalog && loaded && !singleCategory">
  <p ng-if="!parentCategory">Choose from web frameworks, databases, and other components to
  add content to your project.</p>

  <form role="form" class="filter-catalog search-pf has-button">
    <div class="form-group has-clear">
      <!-- Add a hidden label for screen readers. -->
      <div class="search-pf-input-group">
        <label for="search" class="sr-only">Filter by name or description</label>
        <input
           ng-model="filter.keyword"
           type="search"
           id="search"
           placeholder="Filter by name or description"
           class="search-input form-control"
           autocorrect="off"
           autocapitalize="none"
           spellcheck="false">
         <button
           type="button"
           class="clear"
           aria-hidden="true"
           ng-if="filter.keyword"
           ng-click="filter.keyword = ''">
           <span class="pficon pficon-close"></span>
         </button>
       </div>
    </div>
  </form>

  <div ng-if="allContentHidden" class="empty-state-message text-center h2">
    All content is hidden by the current filter.
    <button type="button" class="btn btn-link inline-btn-link" ng-click="filter.keyword = ''">Clear All Filters</button>
  </div>

  <div ng-if="!filterActive">
    <div ng-repeat="category in categories" ng-if="hasContent[category.id]">
      <h2 class="h3" ng-if="category.label">{{category.label}}</h2>
      <div class="row tile-row" ng-class="{ 'mar-top-xl': !category.label || category.items.length < 2 }">
        <div ng-repeat="item in category.items" ng-if="countByCategory[item.id]" class="col-xxs-12 col-xs-6 col-sm-6 col-md-4">
          <div class="tile tile-click" ng-class="{ 'tile-sans-icon' : !item.iconClass, 'tile-sans-description' : !item.description }">
            <div class="tile-title">
              <div ng-if="item.iconClass || category.iconClassDefault" class="image-icon">
                <span aria-hidden="true" class="{{item.iconClass || category.iconClassDefault}}"></span>
              </div>
              <h3>
                <!-- top-level category item -->
                <a ng-if="!parentCategory" ng-href="project/{{projectName}}/create/category/{{item.id || 'none'}}" class="tile-target">
                  {{item.label}}
                </a>
                <!-- subcategory item -->
                <a ng-if="parentCategory" ng-href="project/{{projectName}}/create/category/{{parentCategory.id}}/{{item.id || 'none'}}" class="tile-target">
                  {{item.label}}
                </a>
              </h3>
              <!-- <span class="tile-item-count badge">{{countByCategory[item.id] || 0}}</span> -->
            </div>
            <p ng-if="item.description">{{item.description}}</p>
          </div>
        </div>
      </div>
    </div>
    <div ng-if="hasItemsNoSubcategory">
      <div class="row row-cards-pf row-cards-pf-flex">
        <catalog-image
          image-stream="builder"
          project="{{projectName}}"
          is-builder="true"
          ng-repeat="builder in buildersNoSubcategory track by (builder | uid)">
        </catalog-image>
        <catalog-template
          template="template"
          project="{{projectName}}"
          ng-repeat="template in templatesNoSubcategory | orderBy : ['metadata.name', 'metadata.namespace'] track by (template | uid)">
        </catalog-template>
      </div>
    </div>
  </div>

  <div ng-if="filterActive">
    <div ng-repeat="category in categories" ng-if="hasContent[category.id]">
      <div ng-repeat="item in category.items" ng-if="countByCategory[item.id]">
        <h2 class="h3">
          <span ng-bind-html="item.label | highlightKeywords : keywords"></span>
          <span class="tile-item-count badge">{{countByCategory[item.id] || 0}}</span>
        </h2>
        <div class="row row-cards-pf row-cards-pf-flex mar-top-xl">
          <catalog-image
            image-stream="builder"
            project="{{projectName}}"
            is-builder="true"
            keywords="keywords"
            ng-repeat="builder in filteredBuildersByCategory[item.id] track by (builder | uid)">
          </catalog-image>
          <catalog-template
            template="template"
            project="{{projectName}}"
            keywords="keywords"
            ng-repeat="template in filteredTemplatesByCategory[item.id] | orderBy : ['metadata.name', 'metadata.namespace'] track by (template | uid)">
          </catalog-template>
        </div><!-- /row-cards-pf -->
      </div>
    </div>
    <div ng-if="countFilteredNoSubcategory">
      <h2 class="h3">
        Other {{parentCategory.label}}
        <span class="tile-item-count badge">{{countFilteredNoSubcategory}}</span>
      </h2>
      <div class="row row-cards-pf row-cards-pf-flex mar-top-xl">
        <catalog-image
          image-stream="builder"
          project="{{projectName}}"
          is-builder="true"
          keywords="keywords"
          ng-repeat="builder in filteredBuildersNoSubcategory track by (builder | uid)">
        </catalog-image>
        <catalog-template
          template="template"
          project="{{projectName}}"
          keywords="keywords"
          ng-repeat="template in filteredTemplatesNoSubcategory | orderBy : ['metadata.name', 'metadata.namespace'] track by (template | uid)">
        </catalog-template>
      </div>
    </div>
  </div>
</div>

<!-- If there is only one subcategory with items, just show the items. -->
<div ng-if="singleCategory">
  <category-content
      project-name="projectName"
      project-image-streams="projectImageStreams"
      openshift-image-streams="openshiftImageStreams"
      project-templates="projectTemplates"
      openshift-templates="openshiftTemplates"
      category="singleCategory">
  </category-content>
</div>
